<template>
  <div class="avatar_box">
    <el-breadcrumb separator="/" >
      <el-breadcrumb-item :to="{ path: '/test' }" active-text-color="#ffd04b">首页</el-breadcrumb-item>

      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>缴费列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    主体部分-->
    <el-card  class="mainn">

      <el-row :gutter="25">
        <el-col :span="20">
          <!-- 搜索添加 -->
          <el-input placeholder="请输入搜索内容" v-model="queryInfo.query" clearable @clear="getFindCarList()">
            <el-button slot="append" icon="el-icon-search" @click="getFindCarList"></el-button>
          </el-input>
        </el-col>

      </el-row>
      <!-- 用户列表 -->
      <el-table :data="carlist"  style="hight: 200px"
                border stripe>
        <el-table-column type="index" ></el-table-column>

        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="车牌号" prop="carnumber"></el-table-column>
        <el-table-column label="缴费记录" prop="statemoney"></el-table-column>



      </el-table>

    </el-card>

  </div>
</template>


<script>
export default {
  created (){
    this.getCarList();
  },
  data(){
    return{

      queryInfo:{
        query:"",//查询信息
        pageNum: 1,//当前页
        pageSize: 5,//每页最大数
      },
      menuList: [],
      carlist:[],

      addDialogVisible: false,
      // 添加用户表单项
      addForm: {
        name:'',
        state:'',

      },


      // 控制修改用户对话框显示/隐藏
      editDialogVisible:false,
      // 修改用户信息
      editForm:{},
      // 验证规则
      addFormRules:{
        // 添加用户表单验证规则
        name:[
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 1, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" }
        ],
        state:[
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 1, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
        ],

      },
      // 修改用户表单验证规则
      editFormRules:{
        state:[
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 1, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
        ],

      },
    }

  },
  methods:{
    async getFindCarList() {
      // 调用post请求
      const { data: res } = await this.$http.get("findjiaofei", {
        params: this.queryInfo
      });
      this.carlist = res.data; // 将返回数据赋值
      // this.total = res.numbers; // 总个数
      // console.log(queryInfo);



    },
    async getCarList() {
      // 调用post请求
      const { data: res } = await this.$http.get("carlist2", {

      });
      this.carlist = res.data; // 将返回数据赋值
      // this.total = res.numbers; // 总个数
      // console.log(queryInfo);



    },

    // 展示修改框
    async showEditDialog(name){

      // const {data:res} = await this.$http.get("getUpdatename?name="+name);
      // if (res != "success") {
      // userinfo.state = !userinfo.state;
      // return this.$message.error("操作失败！！！");
      // }
      // this.$message.success("操作成功！！！");

      // this.editForm = res;
      this.editDialogVisible = true;//编辑菜单开启
    },
    // 关闭窗口,重置信息
    editDialogClosed(){
      this.$refs.editFormRef.resetFields();
    },
    // 确认修改
    editUserInfo(){
      this.$refs.editFormRef.validate(async valid =>{//表单验证
        console.log(valid);
        if( !valid ) return;
        // 发起请求
        const {data:res} = await this.$http.put("editCar",this.editForm);
        console.log(res);
        if (res != "success") return this.$message.error("操作失败！！！");
        this.$message.success("操作成功！！！");
        //隐藏
        this.editDialogVisible = false;
        this.getUserList();
      });
    },
  }

}
</script>


<style scoped>

.el-row{
  margin-bottom: 20px;

}
.lefts{
  float: left;
  width: 290px;
  height: 600px;
  background-color: #42b983;
}
.left{
  float: left;
  position: relative;
  width: 290px;
  height: 600px;
  background-color: red;
}
.rights{
  float: left;
  position: relative;
  width: 290px;
  height: 600px;
  background-color: bisque;
}
.avatar_box{
  float: left;
}
.right{
  float: left;
  position: relative;
  width: 290px;
  height: 600px;
  background-color: aqua;
}
.mainn{
  width: 1200px;
}
</style>
